<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-form-item :label="$t('common.enable')" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-switch
          :disabled="!$auth('update', this.$route.meta.permissionId)"
          v-decorator="['status', { valuePropName: 'checked' }]"
        />
      </a-form-item>
      <a-form-item v-action:update :colon="false" label=" " :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-button @click="handleReset">{{ $t('common.cancel') }}</a-button>
        <a-button style="margin-left: 20px" @click="handleSubmit" type="primary">{{ $t('common.submit') }}</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { getSysInfo, updateSysInfo } from '@/api/company'

export default {
  name: 'SysInfo',
  data () {
    return {
      form: this.$form.createForm(this),
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      getSysInfo({ appId: 0 }).then(res => {
        this.data = res.data || {}
        this.$nextTick(() => {
          const { status } = this.data
          this.form.setFieldsValue({
            status: !!status
          })
        })
      })
    },

    handleSubmit () {
      this.form.validateFields((err, value) => {
        if (err) {
          return
        }
        const { id } = this.data
        const { status } = value

        updateSysInfo({
          id,
          appId: 0,
          status: status ? 1 : 0
        }).then(res => {
          this.$message.success(res.message, 3)
        })
      })
    },
    handleReset () {
      this.init()
    }
  }
}
</script>

<style></style>
